<!--文本位置组件-->
<template>
  <div class="content-textPosition">
    <div class="name">文本位置</div>
    <div class="textPosition-radio">
      <div
        class="radio-item"
        v-for="({ name, title, titleActive }, index) in LOCATION"
        :key="index"
        @click="templateSettings.cssStyle.location = title"
        :title="name"
      >
        <img :src="getImgUrl(title, titleActive)" :alt="name" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { LOCATION } from "@/utils/mockConfiguration/mockConfig";
import { useTemplateEditing } from "@/store/modules/templateEditing";
const templateEditing = useTemplateEditing();
const { templateSettings } = storeToRefs(templateEditing); // 获取当前模板编辑相关状态
import left from "@/assets/images/left.png";
import leftActive from "@/assets/images/leftActive.png";
import center from "@/assets/images/center.png";
import centerActive from "@/assets/images/centerActive.png";
import right from "@/assets/images/right.png";
import rightActive from "@/assets/images/rightActive.png";
// 文本位置配置
const TEXT_POSITION_CONFIGURATION = {
  left,
  leftActive,
  center,
  centerActive,
  right,
  rightActive,
};
/**
 * 根据配置类型获取图片地址
 */
const getImgUrl = (title, titleActive) =>
  TEXT_POSITION_CONFIGURATION[
    templateSettings.value.cssStyle?.location === title ? titleActive : title
    ];
</script>

<style scoped lang="less">
.content-textPosition {
  padding: 20px 0;
  //公共标题
  .name {
    font-size: 18px;
    color: #351d1d;
    font-weight: 400;
    margin-bottom: 14px;
  }
  //位置选择
  .textPosition-radio {
    display: flex;
    justify-content: space-evenly;
    .radio-item {
      cursor: pointer;
      img {
        width: 30px;
      }
    }
  }
}
</style>
